```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CC-Switch | Claude 多供应商配置管理工具</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        html {
            scroll-behavior: smooth;
        }
        body {
            font-family: 'Noto Sans SC', 'Noto Serif SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .highlight {
            position: relative;
            z-index: 1;
        }
        .highlight:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30%;
            background-color: rgba(110, 142, 251, 0.3);
            z-index: -1;
            transform: skewY(-1deg);
        }
        .step-number {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
            color: white;
            font-weight: bold;
            margin-right: 15px;
            flex-shrink: 0;
        }
        .code-block {
            font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
            background-color: #f8f9fa;
            border-radius: 6px;
            padding: 15px;
            overflow-x: auto;
        }
        .nav-item {
            position: relative;
        }
        .nav-item:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, #6e8efb 0%, #a777e3 100%);
            transition: width 0.3s ease;
        }
        .nav-item:hover:after {
            width: 100%;
        }
        .dropdown-menu {
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s ease;
        }
        .dropdown:hover .dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
    </style>
</head>
<body class="antialiased">
    <!-- 导航栏 -->
    <header class="fixed w-full bg-white shadow-md z-50">
        <div class="container mx-auto px-6 py-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <i class="fas fa-random text-2xl mr-2 text-purple-600"></i>
                    <a href="#" class="text-xl font-bold text-gray-800">CC-Switch</a>
                </div>
                <nav class="hidden md:flex space-x-8">
                    <a href="#features" class="nav-item text-gray-700 hover:text-purple-600 py-2">核心功能</a>
                    <a href="#scenarios" class="nav-item text-gray-700 hover:text-purple-600 py-2">使用场景</a>
                    <a href="#advantages" class="nav-item text-gray-700 hover:text-purple-600 py-2">优势特色</a>
                    <a href="#guide" class="nav-item text-gray-700 hover:text-purple-600 py-2">上手指南</a>
                    <div class="dropdown relative">
                        <button class="flex items-center text-gray-700 hover:text-purple-600 py-2">
                            资源 <i class="fas fa-chevron-down ml-1 text-sm"></i>
                        </button>
                        <div class="dropdown-menu absolute top-full left-0 mt-2 w-48 bg-white rounded-md shadow-lg py-2 z-50">
                            <a href="https://github.com/farion1231/cc-switch" target="_blank" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 hover:text-purple-600"><i class="fab fa-github mr-2"></i> GitHub</a>
                            <a href="https://www.anthropic.com/api" target="_blank" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 hover:text-purple-600"><i class="fas fa-key mr-2"></i> Anthropic API</a>
                            <a href="https://aws.amazon.com/bedrock/pricing/" target="_blank" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 hover:text-purple-600"><i class="fab fa-aws mr-2"></i> AWS Bedrock</a>
                        </div>
                    </div>
                </nav>
                <div class="md:hidden">
                    <button class="text-gray-700 focus:outline-none">
                        <i class="fas fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- Hero 模块 -->
    <section class="hero-gradient text-white pt-32 pb-20">
        <div class="container mx-auto px-6 flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 mb-10 md:mb-0">
                <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">轻松管理您的 <span class="highlight">Claude API 配置</span></h1>
                <p class="text-xl mb-8">CC-Switch 是一款开源桌面应用程序，专为 Claude Code 用户设计，用于管理和切换不同供应商的 API 配置。通过直观的图形界面简化配置切换和密钥管理，优化 AI 辅助编码工作流。</p>
                <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                    <a href="https://github.com/farion1231/cc-switch" target="_blank" class="bg-white text-purple-600 hover:bg-gray-100 font-semibold py-3 px-6 rounded-lg shadow-md transition duration-300 flex items-center justify-center">
                        <i class="fab fa-github mr-2"></i> GitHub 项目
                    </a>
                    <a href="#guide" class="bg-transparent border-2 border-white hover:bg-white hover:text-purple-600 font-semibold py-3 px-6 rounded-lg transition duration-300 flex items-center justify-center">
                        <i class="fas fa-book mr-2"></i> 使用指南
                    </a>
                </div>
            </div>
            <div class="md:w-1/2 flex justify-center">
                <div class="relative w-full max-w-md">
                    <div class="absolute -top-8 -left-8 w-32 h-32 bg-yellow-400 rounded-full opacity-20"></div>
                    <div class="absolute -bottom-8 -right-8 w-32 h-32 bg-purple-400 rounded-full opacity-20"></div>
                    <div class="relative bg-white rounded-xl shadow-2xl overflow-hidden">
                        <img src="https://github.com/farion1231/cc-switch/raw/main/screenshots/main.png" alt="CC-Switch 界面截图" class="w-full h-auto">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 问题解决部分 -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-800 mb-4">它能解决什么问题？</h2>
                <div class="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div>
            </div>
            <div class="max-w-4xl mx-auto">
                <p class="text-lg text-gray-700 mb-6">使用 Claude Code 时，开发者常需在多个供应商（如 Anthropic、AWS Bedrock、Azure）之间切换 API 配置，手动修改环境变量或配置文件耗时且易出错。不同供应商的密钥管理和模型选择（如 Claude 3.5 Sonnet 或 Opus）复杂，尤其在团队协作或跨项目开发中，频繁切换可能导致配置错误或效率低下。</p>
                <p class="text-lg text-gray-700 mb-6">此外，缺乏统一的界面管理多供应商配置，开发者需依赖 CLI 或文本编辑器，增加了操作门槛。</p>
                <div class="bg-purple-50 border-l-4 border-purple-600 p-4">
                    <p class="text-purple-800 font-semibold"><span class="text-purple-600 font-bold">CC-Switch 正是为解决这些问题而生</span>，提供一键切换配置的桌面工具，支持多供应商密钥管理和模型选择，简化工作流并减少配置错误。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 核心功能 -->
    <section id="features" class="py-16">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-800 mb-4">核心功能概述</h2>
                <div class="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div>
            </div>
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-blue-500 mb-4">
                        <i class="fas fa-exchange-alt text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">一键配置切换</h3>
                    <p class="text-gray-600">在图形界面中选择供应商（如 Anthropic、AWS、Azure），自动应用对应 API 密钥和模型配置，无需手动修改文件。</p>
                </div>
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-purple-500 mb-4">
                        <i class="fas fa-server text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">多供应商支持</h3>
                    <p class="text-gray-600">兼容 Anthropic、AWS Bedrock、Azure 等主流 Claude 提供商，统一管理不同平台的密钥和设置。</p>
                </div>
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-green-500 mb-4">
                        <i class="fas fa-lock text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">密钥安全存储</h3>
                    <p class="text-gray-600">使用系统密钥环（Keychain 或 Credential Manager）加密存储 API 密钥，防止泄露。</p>
                </div>
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-yellow-500 mb-4">
                        <i class="fas fa-cogs text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">模型选择器</h3>
                    <p class="text-gray-600">快速切换 Claude 模型（如 Sonnet、Opus），支持供应商特定的模型参数调整。</p>
                </div>
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-red-500 mb-4">
                        <i class="fas fa-file-export text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">配置导出/导入</h3>
                    <p class="text-gray-600">支持 JSON 格式导出或导入配置，方便跨设备或团队共享设置。</p>
                </div>
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-indigo-500 mb-4">
                        <i class="fas fa-desktop text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">跨平台兼容</h3>
                    <p class="text-gray-600">支持 Windows、macOS 和 Linux，基于 Electron 开发，确保一致的桌面体验。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 使用场景 -->
    <section id="scenarios" class="py-16 bg-gray-50">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-800 mb-4">使用场景</h2>
                <div class="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div>
            </div>
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <div class="flex items-start mb-4">
                        <div class="step-number">1</div>
                        <h3 class="text-xl font-bold text-gray-800">独立开发者跨平台开发</h3>
                    </div>
                    <p class="text-gray-600 pl-14">一名开发者在 Anthropic 和 AWS Bedrock 上使用 Claude Code 开发 Python 项目。通过 CC-Switch 的界面选择 AWS Bedrock，切换到 Sonnet 模型，自动应用密钥和端点，无需编辑环境变量，节省配置时间。</p>
                    <div class="mt-4 pl-14 p-3 bg-blue-50 rounded-lg">
                        <p class="text-blue-700 font-medium">思考问题：你的开发工作流是否涉及多供应商 Claude 配置，能否通过 CC-Switch 简化切换？</p>
                    </div>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <div class="flex items-start mb-4">
                        <div class="step-number">2</div>
                        <h3 class="text-xl font-bold text-gray-800">企业团队协作</h3>
                    </div>
                    <p class="text-gray-600 pl-14">一个 DevOps 团队在 Azure 和 Anthropic 之间切换 Claude 配置以优化成本。团队成员使用 CC-Switch 导入共享的 JSON 配置，选择 Azure 的 Opus 模型运行复杂任务，保持一致性并降低错误风险。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <div class="flex items-start mb-4">
                        <div class="step-number">3</div>
                        <h3 class="text-xl font-bold text-gray-800">调试与测试</h3>
                    </div>
                    <p class="text-gray-600 pl-14">开发者测试不同 Claude 模型的性能，使用 CC-Switch 快速切换 Anthropic 的 Sonnet 和 AWS Bedrock 的 Opus，比较输出质量和响应时间，优化模型选择。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 优势特色 -->
    <section id="advantages" class="py-16">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-800 mb-4">优势与特色</h2>
                <div class="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div>
            </div>
            
            <div class="grid md:grid-cols-2 gap-12">
                <div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-6">CC-Switch 的独特优势</h3>
                    <div class="space-y-6">
                        <div class="flex items-start">
                            <div class="bg-green-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-gray-800 mb-1">图形化界面</h4>
                                <p class="text-gray-600">直观的 GUI 优于 CLI 或手动编辑（如修改 ~/.claude/config），降低操作复杂性。</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-green-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-gray-800 mb-1">跨平台兼容</h4>
                                <p class="text-gray-600">支持 Windows、macOS 和 Linux，基于 Electron 开发，确保一致的桌面体验，优于纯 CLI 工具如 Claude Code CLI。</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-green-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-gray-800 mb-1">安全密钥管理</h4>
                                <p class="text-gray-600">使用系统密钥环存储 API 密钥，优于明文存储或第三方工具（如 ccusage），提升安全性。</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-green-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-gray-800 mb-1">开源与可扩展</h4>
                                <p class="text-gray-600">基于 MIT 许可，允许用户修改源码以支持新供应商或功能，优于专有工具如 Claude Squad。</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-6">局限性</h3>
                    <div class="space-y-6">
                        <div class="flex items-start">
                            <div class="bg-red-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-exclamation text-red-600"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-gray-800 mb-1">依赖 Claude Code CLI</h4>
                                <p class="text-gray-600">需预装 Claude Code CLI 和 Anthropic API 密钥，可能增加初始配置成本。</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-red-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-exclamation text-red-600"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-gray-800 mb-1">Electron 开销</h4>
                                <p class="text-gray-600">基于 Electron 的桌面应用占用内存较高，可能不适合低配设备。</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-red-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-exclamation text-red-600"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-gray-800 mb-1">功能范围有限</h4>
                                <p class="text-gray-600">专注于配置切换，不支持直接运行 Claude 任务或实时监控 token 使用。</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-red-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-exclamation text-red-600"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-gray-800 mb-1">社区维护</h4>
                                <p class="text-gray-600">开源项目依赖社区更新，存在潜在问题（如 90+ 开放 issue），可能影响新功能开发。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 数据可视化 -->
            <div class="mt-16 bg-white p-6 rounded-xl shadow-md">
                <h3 class="text-2xl font-bold text-gray-800 mb-6 text-center">CC-Switch 工作流程图示</h3>
                <div class="mermaid">
                    graph TD
                        A[启动CC-Switch] --> B[选择供应商]
                        B --> C{供应商类型}
                        C -->|Anthropic| D[配置API密钥]
                        C -->|AWS Bedrock| E[配置访问密钥和密钥ID]
                        C -->|Azure| F[配置API密钥和端点]
                        D --> G[选择模型: Sonnet/Opus]
                        E --> G
                        F --> G
                        G --> H[应用配置]
                        H --> I[更新Claude Code CLI环境]
                        I --> J[开始使用Claude Code]
                </div>
            </div>
        </div>
    </section>

    <!-- 上手指南 -->
    <section id="guide" class="py-16 bg-gray-50">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-800 mb-4">上手指南</h2>
                <div class="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div>
            </div>
            
            <div class="max-w-4xl mx-auto">
                <div class="mb-12">
                    <h3 class="text-2xl font-bold text-gray-800 mb-6">1. 安装先决条件</h3>
                    <ul class="space-y-4">
                        <li class="flex items-start">
                            <div class="bg-blue-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-check text-blue-600"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-gray-800 mb-1">安装 Node.js 18+</h4>
                                <p class="text-gray-600">Linux（<code class="bg-gray-200 px-1 rounded">sudo apt install nodejs</code>），macOS（<code class="bg-gray-200 px-1 rounded">brew install node</code>），Windows（从 <a href="https://nodejs.org" target="_blank" class="text-blue-600 hover:underline">nodejs.org</a> 下载）。</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <div class="bg-blue-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-check text-blue-600"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-gray-800 mb-1">安装 Git</h4>
                                <p class="text-gray-600">Linux（<code class="bg-gray-200 px-1 rounded">sudo apt install git</code>），macOS（<code class="bg-gray-200 px-1 rounded">brew install git</code>），Windows（从 <a href="https://git-scm.com" target="_blank" class="text-blue-600 hover:underline">git-scm.com</a> 下载）。</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <div class="bg-blue-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-check text-blue-600"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-gray-800 mb-1">安装 Claude Code CLI</h4>
                                <p class="text-gray-600">从 Anthropic 官网下载，确保 <code class="bg-gray-200 px-1 rounded">claude</code> 在 PATH 中（验证：<code class="bg-gray-200 px-1 rounded">claude --version</code>）。</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <div class="bg-blue-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-check text-blue-600"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-gray-800 mb-1">配置供应商 API 密钥</h4>
                                <ul class="list-disc list-inside text-gray-600 pl-2 space-y-1">
                                    <li>Anthropic：从 <a href="https://www.anthropic.com/api" target="_blank" class="text-blue-600 hover:underline">anthropic.com/api</a> 获取 API 密钥，保存到 ~/.claude/config。</li>
                                    <li>AWS Bedrock：从 AWS 控制台获取访问密钥和密钥 ID。</li>
                                    <li>Azure：从 Azure 门户获取 API 密钥和端点。</li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
                
                <div class="mb-12">
                    <h3 class="text-2xl font-bold text-gray-800 mb-6">2. 安装 CC-Switch</h3>
                    <div class="mb-8">
                        <h4 class="font-bold text-gray-800 mb-3">从预构建版本（推荐）</h4>
                        <ul class="list-disc list-inside text-gray-600 mb-4 pl-2 space-y-1">
                            <li>从 <a href="https://github.com/farion1231/cc-switch/releases" target="_blank" class="text-blue-600 hover:underline">GitHub Releases</a> 下载最新版本（如 cc-switch-x.x.x-win.exe、cc-switch-x.x.x-mac.dmg 或 cc-switch-x.x.x-linux.AppImage）。</li>
                            <li>Windows：双击 .exe 文件安装。</li>
                            <li>macOS：打开 .dmg 文件，拖动应用到 Applications 文件夹。</li>
                            <li>Linux：运行 <code class="bg-gray-200 px-1 rounded">chmod +x cc-switch-x.x.x-linux.AppImage && ./cc-switch-x.x.x-linux.AppImage</code>。</li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="font-bold text-gray-800 mb-3">从源码构建</h4>
                        <div class="code-block">
                            <pre><code>git clone https://github.com/farion1231/cc-switch.git
cd cc-switch
npm install
npm run build
npm start</code></pre>
                        </div>
                    </div>
                </div>
                
                <div class="mb-12">
                    <h3 class="text-2xl font-bold text-gray-800 mb-6">3. 配置 CC-Switch</h3>
                    <ul class="list-disc list-inside text-gray-600 pl-2 space-y-3">
                        <li>启动 CC-Switch，打开图形界面。</li>
                        <li>点击"添加配置"，输入供应商信息：名称（如 "Anthropic-Prod"）、供应商（Anthropic、AWS Bedrock、Azure）、API 密钥和端点（若适用）、默认模型（如 Claude 3.5 Sonnet）。</li>
                        <li>保存配置，密钥将加密存储在系统密钥环中。</li>
                        <li>（可选）导入 JSON 配置：点击"导入"，选择 .json 文件。</li>
                    </ul>
                </div>
                
                <div class="mb-12">
                    <h3 class="text-2xl font-bold text-gray-800 mb-6">4. 使用 CC-Switch</h3>
                    <ul class="list-disc list-inside text-gray-600 pl-2 space-y-3">
                        <li>打开 CC-Switch，选择所需配置（如 "AWS Bedrock - Opus"）。</li>
                        <li>点击"应用"，自动更新 Claude Code CLI 的环境变量。</li>
                        <li>在 Claude Code CLI 运行命令（如 <code class="bg-gray-200 px-1 rounded">claude /code</code>），使用选定配置。</li>
                        <li>导出配置：点击"导出"，生成 JSON 文件用于共享或备份。</li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-6">5. 故障排除</h3>
                    <div class="bg-white p-6 rounded-xl shadow-md">
                        <ul class="space-y-4">
                            <li>
                                <h4 class="font-bold text-gray-800">"API 密钥无效"</h4>
                                <p class="text-gray-600">验证密钥和端点，确保与供应商匹配。</p>
                            </li>
                            <li>
                                <h4 class="font-bold text-gray-800">"应用未启动"</h4>
                                <p class="text-gray-600">检查 Node.js 版本（>=18）或重新安装 Electron 依赖（<code class="bg-gray-200 px-1 rounded">npm install electron</code>）。</p>
                            </li>
                            <li>
                                <h4 class="font-bold text-gray-800">"配置未应用"</h4>
                                <p class="text-gray-600">确保 Claude Code CLI 在 PATH 中，检查 ~/.claude/config 是否更新。</p>
                            </li>
                            <li>
                                <h4 class="font-bold text-gray-800">查看日志</h4>
                                <p class="text-gray-600"><code class="bg-gray-200 px-1 rounded">tail -n 20 -f ~/Library/Logs/Claude/mcp*.log</code>（macOS）或 <code class="bg-gray-200 px-1 rounded">%APPDATA%\Claude\logs\mcp*.log</code>（Windows）。</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 召唤行动 -->
    <section class="py-16 hero-gradient text-white">
        <div class="container mx-auto px-6 text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">开始使用 CC-Switch 简化您的 Claude 配置流程</h2>
            <p class="text-xl mb-8 max-w-2xl mx-auto">立即下载 CC-Switch，体验一键切换 Claude API 配置的便捷。</p>
            <a href="https://github.com/farion1231/cc-switch/releases" target="_blank" class="inline-block bg-white text-purple-600 hover:bg-gray-100 font-semibold py-3 px-8 rounded-lg shadow-md transition duration-300">
                <i class="fas fa-download mr-2"></i> 下载最新版本
            </a>
        </div>
    </section>

    <script>
        // 初始化 Mermaid 图表
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
        
        // 移动端菜单切换
        const mobileMenuButton = document.querySelector('.md\\:hidden button');
        const mobileMenu = document.querySelector('.md\\:hidden + nav');
        if (mobileMenuButton && mobileMenu) {
            mobileMenuButton.addEventListener('click', () => {
                mobileMenu.classList.toggle('hidden');
            });
        }
    </script>
</body>
</html>
```